<template lang="">
  <div>
    <div
      :id="id"
      :style="{
        width,
        height
      }"
    ></div>
  </div>
</template>
<script>
import * as echarts from "echarts";

export default {
  props: {
    legendColor: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "400px"
    },
    height: {
      type: String,
      default: "400px"
    },
    // 原始数据
    originData: {
      type: Object,
      default: () => {}
    },
    // 对比数据
    contrastData: {
      type: Object,
      default: () => {}
    },
    textColor: {
      type: String,
      default: "#CCCCCC"
    },
    // y轴刻度
    yAxisText: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ""
    },
    xAxisData: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: "emo"
    },
    yMax: {
      type: Number,
      default: 0
    }
  },

  watch: {
    "contrastData.data"() {
      this.$nextTick(() => {
        this.init();
      });
    }
  },
  computed: {
    region: () => {
      return (value) => {
        let emotionText = "";
        if (value < 50) {
          emotionText = "恐惧";
        } else if (value >= 50 && value < 100) {
          emotionText = "厌恶";
        } else if (value >= 100 && value < 150) {
          emotionText = "愤怒";
        } else if (value >= 150 && value < 200) {
          emotionText = "快乐";
        } else if (value >= 200 && value < 250) {
          emotionText = "中性";
        } else if (value >= 250 && value < 300) {
          emotionText = "悲伤";
        } else if (value >= 300) {
          emotionText = "惊喜";
        }

        return emotionText;
      };
    }
  },
  methods: {
    percentage(value) {
      const total = 150 + 230 + 224 + 218 + 135 + 147 + 260;
      return ((value / total) * 100).toFixed(2);
    },
    init() {
      const emotionOption = {
        color: this.$props.legendColor,
        legend: {
          right: "10",
          itemWidth: 8,
          itemHeight: 8,
          icon: "rect",
          textStyle: {
            color: "#99B3C8",
            fontSize: 12,
            lineHeight: 12,
            rich: {
              a: {
                verticalAlign: "middle"
              }
            },
            padding: [0, 0, -2, 0] //[上、右、下、左]
          }
        },
        tooltip: {
          show: true,
          formatter: (params, index) => {
            return `时间 : ${params.name}<br />
    学生情绪：${this.region(params.value)} <br />
    情绪占比：${this.percentage(params.value)} %
    `;
          }
        },
        xAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#99B3C8"
            }
          },
          boundaryGap: false,
          axisLabel: {
            color: this.$props.textColor,
            fontSize: 12,
            interval: 4, // 设置刻度间隔为 2，即每隔 2 个刻度显示一个刻度
            margin: 25,
            formatter: (value) => {
              return `${value}分钟`;
            }
          },

          type: "category",
          data: this.$props.xAxisData
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#99B3C8"
            }
          },

          max: this.$props.yMax,
          axisLabel: {
            color: this.$props.textColor,
            fontSize: 12,
            formatter: (value, index) => {
              if (this.$props.type === "emo") {
                return `{${index}|} ${this.$props.yAxisText[index]} `;
              } else {
                return this.$props.yAxisText[index];
              }
            },
            rich: {
              0: {
                height: 20,
                align: "center",
                backgroundColor: {
                  image: require("../../../assets/images/ai/anger.png")
                }
              },
              1: {
                height: 20,
                align: "center",
                backgroundColor: {
                  image: require("../../../assets/images/ai/detest.png")
                }
              },
              2: {
                height: 20,
                align: "center",
                backgroundColor: {
                  image: require("../../../assets/images/ai/fear.png")
                }
              },
              3: {
                height: 20,
                align: "center",
                backgroundColor: {
                  image: require("../../../assets/images/ai/happy.png")
                }
              },
              4: {
                height: 20,
                align: "center",
                backgroundColor: {
                  image: require("../../../assets/images/ai/neutral.png")
                }
              },
              5: {
                height: 20,
                align: "center",
                backgroundColor: {
                  image: require("../../../assets/images/ai/sad.png")
                }
              },
              6: {
                height: 20,
                align: "center",
                backgroundColor: {
                  image: require("../../../assets/images/ai/surprise.png")
                }
              }
            }
          },
          splitLine: {
            show: false
          }
        },
        series: []
      };
      if (this.$props.originData) {
        emotionOption.series.push(this.$props.originData);
      }

      if (this.$props.contrastData) {
        emotionOption.series.push(this.$props.contrastData);
      }

      if (this.$props.title) {
        const title = {
          text: this.$props.title,
          left: "center"
        };
        emotionOption.title = title;
      }
      const dom = document.getElementById(this.$props.id);
      const lineChart = echarts.init(dom);
      lineChart.setOption(emotionOption);
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  }
};
</script>
